<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isHeart" />
    </template>
  </van-cell>
  <UserCardList :user-list="userList" :loading="isLoad" />
  <van-empty v-if="userList===[] && isLoad===false" description="数据为空"/>
</template>

<script setup lang="ts">

//获取推荐用户
import myAxios from "../plugins/myAxios.js" ;
import {ref, watchEffect} from "vue";
import UserCardList from "../components/UserCardList.vue";
import {showFailToast, showSuccessToast} from "vant";

//开关启动状态
const isHeart=ref<Boolean>(false)

//定义一个加载条件
const isLoad=ref(false)

const userList=ref()

//获取推荐用户信息和匹配用户信息整合为一个函数
const isLoadData=async ()=>{
  //普通模式
  if (!isHeart.value){
    //向后端发起请求
    const userListData=await myAxios.get('/user/recommend',{
      params:{
        current:1,
        pageSize:7
      }
    })
        .then(function (response) {
          console.log('/user/commend succeed',response);
          //data可能为空 加一个可选择操作符号？
          return response?.data
        })
        .catch(function (error) {
          console.log('/user/commend failed',error);
        });

    if (userListData){
      userList.value=userListData
    }
    //心动模式
  }else {
    isLoad.value=true
    userList.value=[]
    const res =await myAxios.get('/user/match',{
      params:{
        num:5
      }
    });
    if (res.code===0 && res.data){
      //查询之后的数据复制给列表
      userList.value=res.data
      showSuccessToast('匹配成功!')
    }else {
      //清空列表
      userList.value = []
      showFailToast(res.message)
    }
  }
  //结束加载
  isLoad.value=false
}


//监听开关选择（此时就不需要在dom元素之前去加载了 直接开关去加载对应的数据）
watchEffect( ()=>{
  isLoadData()
})


</script>

<style scoped>

</style>